<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>    
<title>Google Calendar Data API - JavaScript Interactive Samples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/ui.tabs.css" type="text/css" media="screen" /> 

<script src="http://www.google.com/jsapi?key=ABQIAAAArM7h3NX7hYkBySUFFdiEOhQZv7UVnG3xyXTtHRDCeMYh9hYDFxQJbwP-vTetl4j39wK002gT6FWFfw" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/codepress/codepress.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/ui.tabs.js" type="text/javascript"></script>

</head>

<body>      

  <img src="../Logo_25wht.gif" style="position: absolute; top: -100px; left: -100px;">
  
  <div id=main>

    <div>
      
      <h2>Introduction to interactive samples</h2>
      <p>        
        One of the advantages of having a JavaScript client library is that it allows us to provide an interactive browser environment to render sample codes.
      </p>
      <p>  
        The ability to play with the code as you are going through sample code is a great way to learn a new client library.  The following samples are completely interactive, you are able to modify and execute the code straight out of the source code textarea.
        
        Feel free to modify the source code to get a feel for how the different objects and properties are used.  You can utilize the predefined <span class=code>PRINT()</span> method which outputs the argument as a string in the output tab after you hit the "Run" button.
      </p>

      <p>
        The default sample codes are structured to minimize the incidence of accidental update or delete.  All data input for the default sample codes are using strings that are prefixed with "JS-Client" for things like calendar name or event name.  
        This way the samples will be prevented from updating or deleting your personal events.  But caution should always be exercised, as you are able to change the code any which way you desire.
      </p>   
      
    </div>    
  
      <br>

      <div id=action>
        <table class="columns" border =0 cellspacing=20 cellpadding=5>

          <tr valign=top>
            <td>              
              <b>Managing Calendars:</b><br><br>
                <a href="javascript:;" id=retrieveallcalendar>Retrieve all calendars</a><br>
                <a href="javascript:;" id=insertcalendar>Create new calendar</a><br>
                <a href="javascript:;" id=updatecalendar>Update a calendar</a><br>
                <a href="javascript:;" id=deletecalendar>Delete a calendar</a><br>              
            </td>
            <td>              
              <b>Managing Events:</b><br><br>
                <a href="javascript:;" id=retrieveallevent>Retrieve all events </a><br>
                <a href="javascript:;" id=textqueryevent>Retrieve with full text query</a><br>
                <a href="javascript:;" id=datequeryevent>Retrieve with date query</a><br>
                <a href="javascript:;" id=insertevent>Create a single event</a><br>
                <a href="javascript:;" id=insertrecurrence>Create a recurring event</a><br>
                <a href="javascript:;" id=updateevent>Update an event</a><br>
                <a href="javascript:;" id=deleteevent>Delete an event</a><br>              
            </td>
            <td>               
              <b>Other Features:</b><br><br>
                <a href="javascript:;" id=addreminder>Add event reminder</a><br>  
                <a href="javascript:;" id=addextendedproperty>Add extended property</a><br>  
            </td>
          </tr>            
        </table>
      </div>        

      <p class="note">
        <b>Note</b>: In order to execute the following interactive JavaScript
        samples, you must authenticate using your Google account credentials.
        <input type=button id="login" value="Login">
      </p>

    <br>

    <div id=calsection style='display: none;'>
      <select id=calchooser></select>
      <br><br>
      <iframe id='embedcal' width='500' height='350' frameborder=0 src='about:blank'></iframe>
    </div>
    
    <div id=tabsection></div>

    <div id="tabtemplate">
      <div>
        <h2 id=actiontext></h2>
      </div>
      <ul>
        <li><a href="#tab1"><span>Overview</span></a></li>
        <li><a href="#tab2"><span>Output</span></a></li>
      </ul>

      <div id="tab1">
        <div id=overview></div>
        <div style="float: left;">
          <input type=button id=runcode value="Run">
          <input type=button id=resetcode value="Reset Default">
        </div>
        <div style="float: right;" id=codelink></div>
        <br><br>        
        <textarea id=sourcecode class="codepress javascript scrolling-off
        linenumbers-on autocomplete-off" style="width:100%;" wrap="on"></textarea>         
      </div>
            
      <div id="tab2">                                
          <table class="columns" border=0>
          <tr>
            <td colspan=2>
              <input type=button id=reruncode value="Run">
              <input type=button id=editcode value="Edit Code">
              <input type=button id=viewcalendar value="Refresh Calendar"><br><br>
            </td>
          </tr>
          <tr>
            <td style="width: 500px; vertical-align: top;">
              <div id=display class=display></div>                     
            </td>
            <td>
              <div id=embedcalholder></div>
            </td>
          </tr>                                            
        </table>        
     </div>

     <br>
     <br>
    </div>
  
  </div>
</body>
</html>
